<template>
  <div>
    <div class="title cover">{{content.liftaddress}}</div>
    <div class="content">
      <span id="default" class="span-default">{{content.liftaddress}}</span>
      <ul>
        <li>
          <div class="span-title">lift Address</div>
          <div class="span-extra">{{content.liftaddress}}</div>
        </li>
        <li>
          <div class="span-title">lift Address</div>
          <div class="span-extra">{{content.towncuncil}}</div>
        </li>
        <li>
          <div class="span-title">lift Address</div>
          <div class="span-extra">{{content.landingslocation}}</div>
        </li>
        <li>
          <div class="span-title">lift Address</div>
          <div class="span-extra">{{content.motorroomlocation}}</div>
        </li>
        <li>
          <div class="span-title">lift Address</div>
          <div class="span-extra">{{content.maintenancecompany}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'window_lift',
    props: [''],
    data() {
      return {
        content: {}
      };
    },

    components: {},

    computed: {},

    beforeMount() {},

    mounted() {
      this.init()
    },

    methods: {
      init() {
        const {
          query
        } = this.$route.query || {}
        if (content !== null) {
          this.content = query.content;
        }
      }
    },

    watch: {}

  }
</script>
<style scoped>
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .title {
    width: 176px;
    height: 33px;
    background-color: #90EE90;
    /* border: 1px solid red; */
    cursor: pointer;
    font-size: 20px;
  }

  .cover {
    position: relative;
  }

  .cover::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    border: 5px solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  .content {
    width: 152px;
    height: 23px;
    background-color: rgb(248, 246, 242);
    /* border: 1px solid red; */
    overflow: hidden;
  }

  .content-checked {
    width: 152px;
    height: 180px;
    background-color: rgb(248, 246, 242);
    /* border: 1px solid red; */
  }

  ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-items: center;
  }

  .span-title {
    font-size: 12px;
    color: #808080;
  }

  .span-extra {
    font-size: 1px;
    color: black;
  }
</style>